<!-- 我的表格 -->

<template>
  <WebTable>
    <RowIndex />

    <RowTitle :label="`${MAP.WORD}单号`" bind="changeCode" :minWidth="120" />

    <RowDate :label="`${MAP.WORD}时间`" bind="changeTime" />

    <RowTree :label="`${MAP.WORD}${CORE.MAP.ORGAN}`" bind="applicantDeptId" :dict="CORE.ORGAN.DICT" :minWidth="120" />

    <RowText :label="`${MAP.WORD}人`" bind="applicantName" />

    <RowDate v-if="MAP.hasReturn" label="预计归还时间" bind="borrowStartTime" width="auto" :minWidth="120" />

    <RowTime v-if="MAP.hasReturn" label="实际归还时间" bind="borrowEndTime" width="auto" :minWidth="120" />

    <RowText label="备注" bind="remark" :minWidth="160" />

    <RowStatus bind="changeStatus" />

    <RowOperate>
      <template #default="{ row }">
        <BtnText title="查看" @click="openDetail(row)" />
        <BtnText v-if="row.changeStatus === 1" :title="MAP.audit" @click="openAudit(row)" />
        <BtnText v-if="row.changeStatus === 3" :title="MAP.finish" @click="openFinish(row)" />
      </template>
    </RowOperate>

    <DetailBorrow v-if="MAP.hasReturn" v-model="easyVisible" :id="row.id" @change="startList" />
    <DetailReceive v-else v-model="easyVisible" :id="row.id" @change="startList" />
  </WebTable>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import OurFooter from '../../detail/components/OurFooter'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyTable',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixWeb('deal', 'deal_')],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('../../detail', true, /vue$/)),

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      easyVisible: false, // 弹窗是否可见
      row: {}, // 行数据
    }
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...OurFooter.methods,

    /**
     * 打开详情弹窗
     */
    async openDetail(row) {
      this.row = row
      this.easyVisible = true
    },
  },
}
</script>
